<template>
  <transition appear name="fade">
    <div class="confirm">
      <div class="text">
        <span>{{info.username}}邀请您进入房间{{info.chatid}}</span>
      </div>
      <div class="off">
        <input type="checkbox" v-model="isFlag">不再接收此类消息
      </div>
      <div class="btn">
        <button class="false" @click="off">拒绝{{time}}</button>
        <button class="true" @click="toRoom(info.chatid)">进入</button>
      </div>
    </div>
  </transition>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: 'ConfirmVue',
  data() {
    return {
      time: 60,
      info: this.$store.state.confirm,
      isFlag: false
    }
  },
  mounted(){
    this.timer = setInterval(() => {
      this.time--
      if(this.time == 0){
        clearInterval(this.timer)
        this.off()
      }
    },1000)
  },
  methods: {
    // 拒绝
    off(){
      this.$api.removeInvite({
        username: this.info.username
      })
      if(this.isFlag){
        sessionStorage.setItem('inviteConfirm',1)
      }
      this.hideConfirm()
    },
    // 进入房间
    toRoom(id){
      const routeData = this.$router.resolve({
        path: '/Room',
        query: {id}
      })
      window.open(routeData.href, '_blank')
      this.off()
    },
    ...mapMutations(['hideConfirm'])
  },
  destroyed(){
    clearInterval(this.timer)
  }
}
</script>

<style>
.confirm{
  width: 200px;
  background-color: white;
  position: fixed;
  z-index: 999;
  right: 0;
  top: 40%;
  border: 1px solid gray;
  font-size: 0.8rem;
  text-align: center;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 0 6px gray;
  animation: init 1s ease 1;
}
.confirm button{
  width: 60px;
  height: 28px;
  line-height: 28px;
  background-color: white;
  border: 1px solid gray;
  cursor: pointer;
  color: gray;
  opacity: .7;
  margin: 10px;
  margin-bottom: 0;
  border-radius: 4px;
  transition: all .3s ease;
}
.confirm button:hover{
  opacity: 1;
  color: black;
}
.confirm .true{
  background-color: rgb(0, 204, 255);
}
.confirm .off{
  font-size: 0.6rem;
  margin-top: 10px;
  color: gray;
}
.confirm .off input{
  width: 14px;
  height: 14px;
  vertical-align: text-bottom;
  margin-right: 4px;
  cursor: pointer;
}
@keyframes init {
  0%{
    right: -100%;
  }
  100%{
    right: 0;
  }
}
</style>